<template>
<div>
  <el-row>
    <el-col :span="4">
  <img src="src/assets/img/img_2.png" width="500">
    </el-col>
    <el-col :span="12" :offset="8">
  <div class="geci">
   <div class="lrc1">
     <p v-for="(item,key,i) in lyric" :key="i" :class="key==rightTime ? 'active' :'' ">
       {{item}}
     </p>
   </div>
  </div>
    </el-col>
  </el-row>
  <audio  style="width: 100%" ref="toplay" controls>
    <source src="src/assets/audio/youhebuke.mp3">
  </audio>
<!--  <button @click="play">播放</button>-->
</div>
</template>

<script>
import $ from 'jquery'

var lrc=`[00:00.000] 作词 : 许嵩
[00:01.000] 作曲 : 许嵩
[00:02.000] 编曲 : 许嵩
[00:03.000] 制作人 : 许嵩
[00:22.240]天空好想下雨
[00:24.380]我好想住你隔壁
[00:26.810]傻站在你家楼下
[00:29.500]抬起头数乌云
[00:31.160]如果场景里出现一架钢琴
[00:33.640]我会唱歌给你听
[00:35.900]哪怕好多盆水往下淋
[00:41.060]夏天快要过去
[00:43.340]请你少买冰淇淋
[00:45.680]天凉就别穿短裙
[00:47.830]别再那么淘气
[00:50.060]如果有时不那么开心
[00:52.470]我愿意将格洛米借给你
[00:55.020]你其实明白我心意
[00:58.290]为你唱这首歌没有什么风格
[01:02.976]它仅仅代表着我想给你快乐
[01:07.840]为你解冻冰河为你做一只扑火的飞蛾
[01:12.998]没有什么事情是不值得
[01:17.489]为你唱这首歌没有什么风格
[01:21.998]它仅仅代表着我希望你快乐
[01:26.688]为你辗转反侧为你放弃世界有何不可
[01:32.328]夏末秋凉里带一点温热有换季的颜色
[01:41.040]
[01:57.908]天空好想下雨
[01:59.378]我好想住你隔壁
[02:02.296]傻站在你家楼下
[02:03.846]抬起头数乌云
[02:06.183]如果场景里出现一架钢琴
[02:08.875]我会唱歌给你听
[02:10.974]哪怕好多盆水往下淋
[02:15.325]夏天快要过去
[02:18.345]请你少买冰淇淋
[02:21.484]天凉就别穿短裙
[02:22.914]别再那么淘气
[02:25.185]如果有时不那么开心
[02:27.625]我愿意将格洛米借给你
[02:30.015]你其实明白我心意
[02:33.327]为你唱这首歌没有什么风格
[02:37.976]它仅仅代表着我想给你快乐
[02:42.835]为你解冻冰河为你做一只扑火的飞蛾
[02:48.406]没有什么事情是不值得
[02:52.416]为你唱这首歌没有什么风格
[02:57.077]它仅仅代表着我希望你快乐
[03:01.993]为你辗转反侧为你放弃世界有何不可
[03:07.494]夏末秋凉里带一点温热
[03:11.536]
[03:20.924]为你解冻冰河为你做一只扑火的飞蛾
[03:26.615]没有什么事情是不值得
[03:30.525]为你唱这首歌没有什么风格
[03:35.196]它仅仅代表着我希望你快乐
[03:39.946]为你辗转反侧为你放弃世界有何不可
[03:45.644]夏末秋凉里带一点温热有换季的颜色
`
export default {
  name: "Play",
  data(){
    return{
      lyric:"",
      rightTime:"",
      offset:35,
    }
  },
  methods:{
    getLrc(){
     let obj={};
      let reg=/\[(.*?)](.*)/g;
      lrc.replace(reg,(a,b,c)=>{
        b=b.slice(0,5);
        obj[b]=c;
      })
      console.log(obj);
      this.lyric=obj;
      let ad=this.$refs.toplay;
      ad.ontimeupdate=()=>{
        let time=this.transTime(ad.currentTime);
        // console.log(time,"123");
        if(time in this.lyric){
          this.rightTime=time;
        }
        this.lyrivMove();
      }
    },
    lyrivMove(){
      let active=document.getElementsByClassName("active")[0];
      let index=$(".lrc1").children().index(active);
      if(active){
        if(active.offsetTop>= this.offset){
                $(".lrc1").css(
                  "transform",
                      `translateY(-${index*38}px)`
                )
        }
      }
    },
    transTime(time){
      let minute=Math.floor(time/60);
      minute<10 ? (minute="0"+minute) : minute;
      let second=Math.floor(time%60);
      second<10?(second="0"+second):second;
      return `${minute}:${second}`;
    }
  },
  mounted() {
    this.getLrc();
    this.transTime();
  }
}
</script>

<style scoped>
.geci{
  position: relative;
  overflow: hidden; /* 隐藏滚动条 */
}
.lrc1{
  height: 450px;
  text-align: center;
  width: 100%;
  transition: 0.5s;
}
.lrc1 p{
  font-size: 20px;
  color: #8e09dc;
  height: 30px;
  line-height: 30px;

}

.active{
  color: red !important;
  font-size: 30px !important;
}
</style>